<template>
    <div>
        <!-- :draggable="true"，这是 Vue 的属性绑定语法（也称为 v-bind），它告诉 Vue 将这个属性的值当作 JavaScript 表达式来求值。由于 true 是一个布尔值，所以这是正确的用法。
        如果你不使用 : 前缀，Vue 会将属性值当作纯字符串来处理 -->
        <el-dialog :model-value="show" :show-close="showClose" :draggable="true" :close-on-click-modal="false"
            :title="title" :width="width" class="cust-dialog" :top="top" @close="close">
            <div class="dialog-body">
                <!-- 插槽 -->
                <slot></slot>
            </div>
            <template v-if="(buttons && buttons.length > 0) || showCancel">
                <div class="dialog-footer">
                    <el-button link @click="close" v-if="showCancel">取消</el-button>
                    <el-button v-for="btn in buttons" :type="btn.type" @click="btn.click">{{ btn.text }}</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { defineEmits } from 'vue';
const props = defineProps({
    show: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "标题",
    },
    showClose: {
        type: Boolean,
        default: true,
    },
    width: {
        type: String,
        default: "30%",
    },
    top: {
        type: String,
        default: "30px",
    },
    buttons: {
        type: Array,
        default: [],
    },
    showCancel: {
        type: Boolean,
        default: true,
    },
});
const emit = defineEmits();
const close = () => {
    emit("close");
};
</script>
<style lang="scss">
.cust-dialog {
    margin-top: 0px;
    margin-bottom: 0px;

    .dialog-body {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 15px;
        min-height: 100px;
        // max-height: calc(100vh - 190px); 的意思是将元素的最大高度设置为浏览器窗口高度的100%减去190像素。
        // 这通常用于确保元素不会超出浏览器窗口的一定范围，同时留出一些空间给页面的其他部分或防止内容溢出
        max-height: calc(100vh - 190px);
        overflow: auto;
    }

    .dialog-footer {
        text-align: right;
        padding: 10px 20px;
    }
}
</style>